<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="notice">每日英语申请获得以下权限：</text>
			<text class="tips">• 获取你的公共信息（昵称，头像等)</text>
		</view>
		<u-button openType="getUserInfo" @getuserinfo="getUserInfo" shape="circle" color="#bb7bff"
			:customStyle="buttonStyle" text="确认授权" />
		<u-button shape="circle" color="#ffffff" :customStyle="cancelBtnStyle" @click="back" text="取消" />

	</view>
</template>

<script>
	import mixin from '../common/login-page.mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				buttonStyle: {
					width: '80vw',
					color: '#ffffff',
					fontWeight: 800,
				},
				cancelBtnStyle: {
					width: '80vw',
					color: '#7f7f7f',
					fontWeight: 800,
					marginTop: '30rpx'
				}
			}
		},
		methods: {
			/**
			 * 获取用户信息
			 * @param {Object} e
			 */
			getUserInfo(e) {
				qq.checkSession({
					success: () => {
						uni.login({
							success: (res) => {
								this.login(res.code, e.detail)
							}
						})
					},
					fail() {
						// session_key 已经失效，需要重新执行登录流程
						uni.login({
							success: (res) => {
								this.login(res.code, e.detail)
							}
						})
					}
				})
			},
			/**
			 * 登录
			 * @param {Object} code
			 * @param {Object} detail
			 */
			login(code, detail) {
				uni.showLoading({
					title:'登录中',
					mask:true
				})
				uniCloud.callFunction({
					name: 'ggb-id-cf',
					data: {
						action: 'login',
						params: {
							code,
							detail
						}
					}
				}).then(({result}) => {
					
					if (result&&result.code === 0) {
						this.loginSuccess(result)
					} else {
						uni.showModal({
							title: this.$t('common').error,
							content: result.msg,
							showCancel: false,
							confirmText: this.$t('common').gotIt
						});
					}
				}).finally(()=>uni.hideLoading())
			},
			back(){
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 100vh;
		width: 100%;
	}

	.logo {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50rpx;
		margin-bottom: 50rpx;
		margin-top: 20vh;
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
		font-size: 24rpx;
		align-items: center;
		margin-bottom: 50rpx;

		.notice {

			color: black;
		}

		.tips {
			color: #7f7f7f;
		}
	}
</style>
